<template>
  <div class="container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="container-header">
        <div class="first">
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dingdan-copy"></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">今日订单数</div>
              <div class="dan">{{ total1 }}单</div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-lirunfenxi-copy1
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">今日销售额</div>
              <div class="dan">{{ totalprice1 }}元</div>
            </div>
          </div>
        </div>

        <!-- second -->
        <div class="second">
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-dingdan-copy2
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">昨日订单数</div>
              <div class="dan">{{ total2 }}单</div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-lirunfenxi-copy2
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">昨日销售额</div>
              <div class="dan">{{ totalprice2 }}元</div>
            </div>
          </div>
        </div>

        <!-- 3 -->
        <div class="three">
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-dingdan-copy3
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">本周订单数</div>
              <div class="dan">{{ total3 }}单</div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-lirunfenxi-copy3
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">本周销售额</div>
              <div class="dan">{{ totalprice3 }}</div>
            </div>
          </div>
        </div>
        <!-- 4 -->
        <div class="four">
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-dingdan-copy1
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">本月订单数</div>
              <div class="dan">{{ total4 }}单</div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-lirunfenxi-copy
"
                ></use>
              </svg>
            </div>
            <div class="right">
              <div class="text">本月销售额</div>
              <div class="dan">{{ totalprice4 }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="main" style="width: 800px; height: 600px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="main2" style="width: 800px; height: 600px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>



<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.getEcharts();
    this.getShanXing();
  },
  data() {
    return {
      //今日用的数据
      total1: 0,
      totalprice1: 0,
      //昨日用的
      total2: 0,
      totalprice2: 0,
      //本周用的
      total3: 0,
      totalprice3: 0,
      //本月用的
      total4: 0,
      totalprice4: 0,
      // dete1: [10, 100, 50, 60, 30, 40, 10, 50, 20, 80, 90, 45],
      option: {
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "销售额",
            axisLabel: {
              formatter: "{value} 元",
            },
          },
          {
            type: "value",
            name: "订单量",
            axisLabel: {
              formatter: "{value} 单",
            },
          },
        ],
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: "bar",
          },
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: "line",
          },
        ],
      },
      //排行前十的菜品
      ten: [],
    };
  },
  created() {
    this.getDay();
    this.getOtherDay();
    this.getSeven();
    this.getMonth();
    this.getFour();
    this.getFive();
    this.getSix();
    this.getTen();
  },
  methods: {
    //获取echarts图表
    getEcharts() {
      // var echarts = require('echarts');
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom, null, {
        width: 800,
        height: 600,
      });
      // console.log(this.dete1,"mountedzhong")
      myChart.setOption({
        title: {
          text: "2022年每月销售额/订单数",
        },
        tooltip: {},
        legend: {
          data: ["销售额", "订单量"],
        },
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: [
          {
            position: "left",
            type: "value",
            name: "销售额",
            axisLabel: {
              formatter: "{value} 元",
            },
          },
          {
            position: "right",
            type: "value",
            name: "订单量",
            axisLabel: {
              formatter: "{value} 单",
            },
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            data: [10, 100, 50, 60, 30, 40, 10, 50, 20, 80, 90, 45],
            yAxisIndex: "0", //使用第一个y轴，序号从0开始
          },
          {
            name: "订单量",
            type: "line",
            data: [10, 100, 50, 60, 30, 40, 10, 50, 20, 80, 90, 45],
            yAxisIndex: "1", //使用第一个y轴，序号从0开始
          },
        ],
      });
      // var option;
      myChart.setOption(this.option);
    },
    //获取扇形图
    getShanXing() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "销量前十菜品占比",
          left: "left",
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "销量前十占比",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            // data: [
            //   { value: 40, name: "rose 1" },
            //   { value: 38, name: "rose 2" },
            //   { value: 32, name: "rose 3" },
            //   { value: 30, name: "rose 4" },
            //   { value: 28, name: "rose 5" },
            //   { value: 26, name: "rose 6" },
            //   { value: 22, name: "rose 7" },
            //   { value: 18, name: "rose 8" },
            // ],
            data: this.ten,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //获取排行前十的菜品
    async getTen() {
      const { data: res } = await this.$http.get("/dishes/getTen");
      console.log(res, "前十菜品fdjsla");
      res.data.forEach((item) => {
        this.ten.push({
          value: item.dishtotal,
          name: item.dishname,
        });
      });
      console.log(this.ten);
      this.getShanXing();
    },

    //获取当天的数据
    async getDay() {
      const { data: res } = await this.$http.get("/order/getDay");
      console.log(res, "当天的");
      res.data.forEach((item) => {
        this.totalprice1 += item.totalprice;
      });
      this.total1 = res.data.length;
    },

    //获取昨日的数据
    async getOtherDay() {
      const { data: res } = await this.$http.get("/order/getOtherDay");
      console.log(res, "昨日的");
      res.data.forEach((item) => {
        this.totalprice2 += item.totalprice;
      });
      this.total2 = res.data.length;
    },
    //获取本周的
    async getSeven() {
      const { data: res } = await this.$http.get("/order/getSeven");
      console.log(res, "本周的");
      res.data.forEach((item) => {
        this.totalprice3 += item.totalprice;
      });
      this.total3 = res.data.length;
    },

    //获取本月的
    async getMonth() {
      const { data: res } = await this.$http.get("/order/getMonth");
      console.log(res, "本月的");
      res.data.forEach((item) => {
        this.totalprice4 += item.totalprice;
      });
      this.total4 = res.data.length;
    },
    //获取4月的数据
    async getFour() {
      const { data: res } = await this.$http.get("/order/getFour");
      console.log(res, "4444444444444");
      res.data.forEach((item) => {
        // this.data[3] += item.totalprice;
        // this.dete1[3] += item.totalprice
        this.option.series[0].data[3] += item.totalprice;
      });
      this.option.series[1].data[3] = res.data.length;
      this.getEcharts();
      console.log(this.option.series[0].data);
    },
    //获取5月份的数据
    async getFive() {
      const { data: res } = await this.$http.get("/order/getFive");
      console.log(res, "4444444444444");
      res.data.forEach((item) => {
        // this.dete1[4] += item.totalprice;
        this.option.series[0].data[4] += item.totalprice;
      });
      this.option.series[1].data[4] = res.data.length;
      this.getEcharts();
      console.log(this.option.series[0].data);
    },
    //获取6月份的数据
    async getSix() {
      const { data: res } = await this.$http.get("/order/getSix");
      console.log(res, "4444444444444");
      res.data.forEach((item) => {
        // this.dete1[4] += item.totalprice;
        this.option.series[0].data[5] += item.totalprice;
      });
      this.option.series[1].data[5] = res.data.length;
      this.getEcharts();
      console.log(this.option.series[0].data);
    },
  },
};
</script>

<style scoped>
.icon {
  width: 5em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-card {
  margin: 3px 0;
}
.container-header {
  display: flex;
  justify-content: space-around;
  /* padding-bottom: 30px; */
  margin-top: 5px;
}
.item {
  display: flex;
  align-items: center;
}
.left {
  padding-right: 7px;
}
.right {
  text-align: center;
}
.text {
  color: rgb(181, 179, 180);
}
.dan {
  font-size: 18px;
  font-weight: 400;
}
#main {
  /* margin: 15px auto; */
}
</style>